<!D<!DOCTYPE html>
<html>
	<head>
		<title>
			我的作品
		</title>
	</head>
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<p>段落:文字说明</p>
		<p>标题只支持6级标题</p>
		<br>
		<p>"br"标签是换行</p>
		<hr>
		<p>"hr"标签是横线</p>
		<img src="https://i.loli.net/2020/08/07/IWznq4Lm2eXAEj9.jpg" 
		alt="这是一张图片" width="800" height="360">
		<p>img的alt属性是一种补救措施，当图片无法显示时，显示alt属性中的文字</p>
		<p>图片显示需要用到'src'属性，本地图片获取URL，使用
			<a href="https://sm.ms">此网站</a>可将本地图片上传，获取图片的URL
		</p>
		<hr>
		<p>这是
			<strong>
				<a href="https://blog.csdn.net/">CSDN</a>
			</strong>的链接，点击文字可以跳转
		</p>
		<p>这一部分使用了链接'a'标签和加粗的'strong'标签</p>
		<hr>
		<ul>
			<li>这是</li>
			<li>一个</li>
			<li>无序</li>
			<li>排序</li>
		</ul>
		<p>无序排序使用'ul'标签，每一个类别使用'li'标签</p>
		<hr>
		<ol>
			<li>这是</li>
			<li>一个</li>
			<li>有序</li>
			<li>排序</li>
		</ol>
		<p>无序排序使用'ol'标签，每一个类别使用'li'标签</p>
		<hr>
		<input type="text" placeholder="输入提示">
		<p>输入框使用'input'标签，'input'标签与'imge'标签类似，无对应的副标签
			'type'属性有多个值，'placeholder'是一个提示内容，输入之后会被掩盖
		</p>
		<hr>
		<button type="button">这是一个可以点击的按钮</button>
		<p>设置按钮使用'button'标签，其'type'属性值为'button'</p>
		<hr>
		<label><input type="radio" name="man-woman">男</label>
		<label><input type="radio" name="man-woman">女</label>
		<p>这是一个单选框，每个选项使用'label'标签，使用'input'其属性'type‘值为'radio‘</p>
		<hr>
		<label><input id="a" type="checkbox" name="letter">a</label>
		<label><input id="b" type="checkbox" name="letter">b</label>
		<label><input id="c" type="checkbox" name="letter">c</label>
		<p>这是一个多选框，每个选项使用'label'标签，使用'input'其属性'type'值为'checkbox'</p>
		<hr>
		<div>
			<input type="file" name="file">
			<button type="submit">Submit</button>
			<p>此部分使用'input'标签，其属性'type'值为'file',可选择本地文件,按钮为使用'button'标签，其属性'type'值为'submit'</p>
		</div>
		<hr>
		<input type="password" placeholder="请输入密码" name="password">
		<p>密码输入形式，使用'input'标签，其属性'type'值为'password','placeholder'是输入提示，输入的字符会转换为圆点，也可查看原字符</p>
		<hr>
		<p>属性type的值有如下几种:</p>
		<table border="5">
			<tr>
				<th>属性值</th>
				<th>描述</th>
			</tr>
			<tr>
				<td>button</td>
				<td>可点击按钮</td>	
			</tr>
			<tr>
				<td>checkbox</td>
				<td>复选框</td>
			</tr>
			<tr>
				<td>file</td>
				<td>输入字段和”浏览“按钮，供文件上传</td>
			</tr>
			<tr>
				<td>hidden</td>
				<td>隐藏的输入字段</td>
			</tr>
			<tr>
				<td>image</td>
				<td>图像形式的提交代码</td>
			</tr>
			<tr>
				<td>password</td>
				<td>密码字段，该字段的字符被掩码</td>
			</tr>
			<tr>
				<td>radio</td>
				<td>单选按钮</td>
			</tr>
			<tr>
				<td>reset</td>
				<td>重置按钮，清楚表单中的所有数据</td>
			</tr>
			<tr>
				<td>submit</td>
				<td>提交按钮，把表单中的数据发送到服务器</td>
			</tr>
			<tr>
				<td>text</td>
				<td>单行的输入字段，可输入文本，默认宽度为20个字符</td>
			</tr>
		</table>
		<p>表格使用'table'标签，其中每一行使用'tr'标签，每一个元素使用'td'标签，其中表头使用'th'标签，会进行加粗处理</p>
		<hr>
		<a href="#"><img src="https://i.loli.net/2020/08/07/IWznq4Lm2eXAEj9.jpg" 
		alt="这是一张图片"></a>
		<p>使用此方法显示图片，图片为一个链接，当鼠标悬停在上面会变成点击链接的形式</p>
		
	</body>
</html>
